<template>
  <div id="member-all">
    <c-title :hide="false" :text="'我的工具'"></c-title>
    <van-tabs v-model="active" duration="0" line-width="0" scrollspy sticky color="#ffc11e" title-active-color="#ffc11e" v-if="plugin.length > 0">
      <van-tab :title="item.name" v-for="(item, index) in plugin" :key="index">
        <div class="plugins-box">
          <p class="plugins-title">{{ item.name }}</p>
          <div class="plugin-items-box">
            <template v-for="(icon, index) in item.plugin">
              <div class="plugin-items-icon" v-if="icon.url && notShow.indexOf(icon.url) < 0" :key="icon.name + index" @click="pluginGoto(icon)">
                <i class="iconfont order-iconfont" :class="icon.class" :style="icon.image_url | setBGImage"></i>
                <span>{{ icon.title }}</span>
              </div>
            </template>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!--海报部分-->
    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!--海报部分end-->
  </div>
</template>

<script>
// import { Toast } from "vant";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import { posterMixin } from "../../utils/poster"; //海报
export default {
  mixins: [posterMixin], //加载更多
  data() {
    return {
      active: "1",
      //H5端没有做的入口
      notShow: ["coupons_qrcode"],
      plugin: [],
      poster_center_is_replace: false,
      uniacid: ""
    };
  },
  activated() {
    this.uniacid = this.$route.query.i;
    if (this.plugin.length <= 0) {
      this.getPlugins();
    }
    let info_basic = JSON.parse(localStorage.getItem("yz_basic_info"));
    if (info_basic.plugin_setting && info_basic.plugin_setting.poster_center) {
      if (info_basic.plugin_setting.poster_center.is_open == 1) {
        if (info_basic.plugin_setting.poster_center.is_replace == 1) {
          this.poster_center_is_replace = true;
        }
      }
    }
  },
  components: {
    yzGoodsposter
  },
  methods: {
    getPlugins() {
      $http.get("member.member.more-plugins", {}, "loading").then(response => {
        var data1 = response.data.plugin;
        data1.forEach(item => {
            console.log(item.name);
              // 处理"必备工具"分组：过滤掉name为"m-collection"的插件
              if (item.name === "必备工具") {
                item.plugin.unshift({
                      class: "icon-fontclass-liulan",
                      mini_url: "/packageD/member/footprint/footprint",
                      title: "浏览记录",
                      url: "footprint",
                      name: 'footprint',
                      value: 0
                    })
              }
            });
        if (this.uniacid == "121") {
          // 处理逻辑
          const processedArray = data1
            .map(item => {
              // 处理"必备工具"分组：过滤掉name为"m-collection"的插件
              if (item.name === "必备工具") {
                return {
                  ...item,
                  plugin: item.plugin
                    .filter(plugin => plugin.name !== "m-collection")
                    .filter(plugin => plugin.name !== "m-address")
                    .filter(plugin => plugin.name !== "m-coupon")
                    .filter(plugin => plugin.name !== "findpwd")
                    .filter(plugin => plugin.name !== "member_code")
                    .filter(plugin => plugin.name !== "member_pay_code")
                };
              }
              if (item.name === "互动参与") {
                return {
                  ...item,
                  plugin: item.plugin.filter(plugin => plugin.name !== "m-pinglun")
                };
              }
              return item;
            })
            .filter(item => item.plugin.length > 0); // 过滤掉plugin为空的分组
          this.plugin = processedArray;
        } else {
          this.plugin = data1;
        }
      });
    },
    pluginGoto(item) {
      if (item.diy_url) {
        window.location.href = item.diy_url;
        return;
      }
      if (!item.name) {
        this.$router.push(this.fun.getUrl(item.url, { fromHome: 1 }));
        return;
      }
      if (item.name == "article") {
        this.$router.push(
          this.fun.getUrl(item.url, {
            id: "0"
          })
        );
      }else if(item.name == "footprint") {
        this.$router.push(this.fun.getUrl("footprint"));
      } else if (item.url == "liveList") {
        this.$router.push(this.fun.getUrl(item.url, { from: 1 }));
      } else if (item.name == "courier") {
        window.localStorage.setItem("couriername", item.title);
        this.$router.push(this.fun.getUrl(item.url));
      } else if (item.name == "m-erweima") {
        // 海报
        if (this.poster_center_is_replace) {
          this.$router.push(this.fun.getUrl("newPosterIndex", {}));
        } else {
          this.openQrCode("block");
        }
      } else if (item.name == "supplier") {
        this.$router.push(
          this.fun.getUrl(item.url, {
            uid: this.supplier_id
          })
        );
      } else if (item.name == "order-inventory") {
        this.$router.push(this.fun.getUrl("stockorderList", { stock: "stock" }));
      } else {
        this.$router.push(this.fun.getUrl(item.url, { fromHome: 1 }));
      }
    }
  },
  filters: {
    setBGImage(data) {
      if (data) {
        return { "background-image": `url(${data})` };
      } else {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep  .van-tabs__nav{
  display: flex;
  justify-content: flex-start;
}
::v-deep .van-tab--active {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #151515 !important;
  display: flex;
  justify-content: flex-start;
}
@import "../../assets/css/icon.scss";
.icon-fontclass-dizhi {
    background: url("https://shops.cg500.com/static/miniNewImage/mine-tool-dizhiguanli.png") no-repeat center;
  }

  .icon-fontclass-dizhi::before {
    content: "";
  }
  .icon-fontclass-erweima {
    background: url("https://shops.cg500.com/static/miniNewImage/mine-tool-erweima.png") no-repeat center;
  }

  .icon-fontclass-erweima::before {
    content: "";
  }
  .icon-fontclass-liulan {
    background: url("https://shops.cg500.com/static/miniNewImage/mine-tool-zuji.png") no-repeat center;
  }

  .icon-fontclass-liulan::before {
    content: "";
  }
  .order-iconfont {
  width: 34px !important;
  height: 34px !important;
  background-size: 34px !important;
    
}
.plugins-box {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;

  .plugins-title {
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    border-bottom: 1px solid #f3f3f3;
  }
}

.plugin-items-box {
  display: flex;
  flex-wrap: wrap;
}

.plugin-items-icon {
  display: flex;
  flex-direction: column;
  width: 25%;
  margin-bottom: 10px;
  font-size: 12px;

  .iconfont {
    display: inline-block;
    margin: 0 auto 5px auto;
    font-size: 1.53rem;
    color: rgb(241, 83, 83);
  }
}
</style>